<template>
	<view class="ticket">
		<view class="status_bar_h" :style="{
				height: `${statusBarHeight}px`,
				backgroundColor: '#20BF6C',
			}"></view>
		<view class="img_box">
			<!-- <swiper
				style="height: 400rpx"
				circular
				:indicator-dots="false"
				:autoplay="true"
				:interval="2000"
				:duration="500">
				<swiper-item
					v-for="(item, key) in src"
					:key="key">
					<view class=""
						><image
							style="width: 100%; height: 400rpx"
							mode="aspectFill"
							:src="item"></image
					></view>
				</swiper-item>
			</swiper> -->
			<image style="width: 100%; height: 400rpx" mode="aspectFill" :src="src">
			</image>
			<view class="back" @click="back">
				<image src="/static/images/arrow-left.png" mode="widthFix"></image>
				<text>返回</text>
			</view>
		</view>
		<view class="main">
			<view class="title">
				<view class="store">{{ view.store }}</view>
				<view class="info">
					<text>歡迎您：</text><text>{{ view.user?.mobile }} |
					</text><text>{{ view.user.level === 0 ? '普通會員' : '' }} | </text><text @click="logout">退出</text>
				</view>
			</view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll_Y" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll">
				<view v-for="(item, key) of list" class="ticket_box" @click="handShopping(item)" :key="key">
					<view class="left">
						<view>{{ `$${item.money}` }}</view>
						<view>{{ `限用${item.num}次` }}</view>
					</view>
					<view class="right">
						<view>{{ item.title }}</view>
						<view class="expir">{{
							`有效期${formatDate(item.end_time)}`
						}}</view>
					</view>
					<view class="btn" @click="handShopping(item)">
						去購買
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import useStore from '@/store/index.js';
	import baseURL from '@/utils/baseURL.js';
	import {
		formatDate
	} from '@/utils/formatDate.js';
	import {
		getTicketList
	} from '@/api/user.js';
	export default {
		data() {
			return {
				src: [],
				baseURL,
				isChecked: false,
				disabled: false,
				changeText: '獲取驗證碼',
				form: {},
				view: {
					ticket: {},
					user: {},
					store: '',
					coupon: '',
				},
				statusBarHeight: 0, // 顶部状态栏高度
				bthHeight: 0, // 底部按钮高度
				list: [],
				scrollTop: 0,
				old: {
					scrollTop: 0,
				},
				page: 1,
				timer: null,
			};
		},
		onLoad() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// const screenTop = uni.getSystemInfoSync().safeArea.top;
			// const screenBot = uni.getSystemInfoSync().safeArea.bottom;
			this.bthHeight = uni.getSystemInfoSync().screenHeight - (1000 - 40) / 2;
			// console.log('uni.getSystemInfoSync()', uni.getSystemInfoSync());
			// console.log('this.bthHeight', this.bthHeight);
			// console.log('screenTop', screenTop);
			// console.log('screenBot', screenBot);
			const {
				user
			} = useStore();
			const userOptions = JSON.parse(uni.getStorageSync('userOptions'));
			const equipmentOptions = JSON.parse(uni.getStorageSync('equipmentOptions'));
			this.view = {
				ticket: user.ticket,
				user: userOptions,
				store: equipmentOptions.name,
				coupon: '',
			};
			this.getTicketList();
			// const token = JSON.parse(uni.getStorageSync('token'))
			// 	? JSON.parse(uni.getStorageSync('token'))
			// 	: ''; // 1 店家 2商家
			// if (!token) {
			// 	uni.reLaunch({
			// 		url: '/pages/login/login',
			// 	});
			// } else {
			// }
			this.setSwiperImg();
			this.countdown();
		},
		onUnload() {
			clearTimeout(this.timer);
		},
		methods: {
			countdown() {
				this.timer = setTimeout(() => {
					// uni.reLaunch({
					// 	url: '/pages/index/index',
					// });
				}, 1000 * 60 * 10);
			},
			clearCountdown() {
				clearTimeout(this.timer);
				this.countdown();
			},
			setSwiperImg() {
				const equipmentOptions = JSON.parse(
					uni.getStorageSync('equipmentOptions')
				);
				// console.log('equipmentOptions', equipmentOptions.imagejh);
				// const _src = equipmentOptions.imagejh ?
				// 	equipmentOptions.imagejh.split(',') :
				// 	[];
				// if (_src.length > 1) {
				// 	this.src = _src.map(item => baseURL + item);
				// } else if (_src.length === 1) {
				// 	this.src = [baseURL + _src[0]];
				// }
				this.src = baseURL + equipmentOptions.image3
			},
			checkForm() {
				const {
					user_name,
					user_pass
				} = this.form;
				return user_name && user_pass ? true : false;
			},
			getTicketList() {
				const equipmentOptions = JSON.parse(
					uni.getStorageSync('equipmentOptions')
				);
				const params = {
					type: 2,
					page: this.page,
					store_id: equipmentOptions.id,
				};
				getTicketList(params).then(res => {
					this.list = [...this.list, ...res];
				});
			},
			formatDate(data) {
				return formatDate(data);
			},
			jump(data) {
				let url = '';
				switch (data) {
					case 'register':
						url = '/pages/register/register';
						break;
					case 'codeLogin':
						url = '/pages/menu/menu';
						break;
					case 'scanCode':
						url = '/pages/scanCode/scanCode';
						break;
					case 'pay':
						url = '/pages/pay/ticket/ticket';
						break;
					case 'logout':
						url = '/pages/index/index';
						break;
					default:
				}
				uni.reLaunch({
					url
				});
			},
			handShopping(data) {
				// console.log('购买');
				const {
					user
				} = useStore();
				user.setTicketState(data);
				// this.jump('pay');
				uni.navigateTo({
					url: '/pages/pay/ticket/ticket'
				})
			},
			logout() {
				uni.removeStorageSync('userOptions');
				this.jump('logout');
			},
			upper(e) {
				// console.log(e);
			},
			lower(e) {
				// console.log(e, '已经滚动到底部');
			},
			scroll(e) {
				// console.log(e, '记录滚动相关的数据');
			},
			async handPay() {
				this.jump('pay');
			},
			back() {
				uni.reLaunch({
					url: '/pages/shop/shop'
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.ticket {
		height: 100%;

		.img_box {
			// padding: 40rpx 40rpx 0;
			position: relative;

			.back {
				position: fixed;
				left: 10rpx;
				bottom: 30rpx;
				display: flex;
				align-items: center;
				color: #fff;
				background-color: #ff914d;
				padding: 5rpx 10rpx;
				border-radius: 20rpx;

				image {
					width: 50rpx;
					margin-right: 10rpx;
				}
			}
		}

		.main {
			padding: 20rpx;

			.title {
				padding-bottom: 20rpx;
				font-size: 24rpx;
				color: $uni-color-green;
				display: flex;
				justify-content: space-between;
			}

			.scroll_Y {
				width: 100%; // 滚动区域的宽度
				height: 700rpx; // 滚动区域的高度，为了兼容问题，尽量设置大一些

				.ticket_box {
					position: relative;
					margin-bottom: 20rpx;
					border-radius: 20rpx;
					background-color: $uni-color-white;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						width: 250rpx;
						height: 150rpx;
						text-align: center;
						border-top-left-radius: 20rpx;
						border-bottom-left-radius: 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						color: $uni-color-white;
						-webkit-mask-image: radial-gradient(circle at 500rpx 8rpx,
								transparent 8rpx,
								$uni-color-green 9rpx),
							radial-gradient(closest-side circle at 50%,
								$uni-color-green 99%,
								transparent 100%);
						-webkit-mask-size: 100%, 10rpx 20rpx;
						-webkit-mask-repeat: repeat, repeat-y;
						-webkit-mask-position: 140rpx 10rpx, 245rpx;
						-webkit-mask-composite: source-out;
						mask-composite: subtract;
						background-color: $uni-color-green;
					}

					.right {
						flex: 1;
						height: 150rpx;
						padding-left: 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.expir {
							font-size: 24rpx;
							color: $uni-color-grey-dark;
						}
					}

					.btn {
						position: absolute;
						right: 0;
						bottom: 50rpx;
						height: 40rpx;
						padding: 0 10rpx;
						border: 2rpx solid $uni-color-green;
						line-height: 40rpx;
						text-align: center;
						border-radius: 20rpx;
						font-size: 24rpx;
						color: $uni-color-green;
					}
				}
			}
		}
	}
</style>